<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度条</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .bar-box{
            width: 500px;
            height: 30px;
            border: 1px solid #000;
            margin: 50px auto 25px;
            border-radius: 5px;
            overflow: hidden;
        }
        .bar{
            width: 0;
            height: 30px;
        }
        p{
            text-align: center;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="bar-box">
        <div class="bar" ></div>
    </div>
    <p><span>0.00</span>%</p>

    <script>
        // 获取盒子、进度条
        var bar = document.getElementsByClassName('bar')[0];
        var span = document.getElementsByTagName('span')[0];
        // 结构标签那里必须要设置内联肯宽度，否则直接获取为空，只能用offsetWidth获取
        var W = 0;

        // 设置定时器
        var timer = setInterval(function(){
            // 小于500则宽度累加，达到500停止定时器
            W += 0.3;
            bar.style.width = W + 'px';
            // 修改进度
            span.innerHTML = ((W/500)*100).toFixed(2) + '';
            // 根据进度改变颜色
            if(W<100){
                bar.style.background = 'red';
            }else if(W<200 && W >=100){
                bar.style.background = 'blue';
            }else if(W<300 && W >=200){
                bar.style.background = 'purple';
            }else if(W<400 && W >=300){
                bar.style.background = 'pink';
            }else if(W<500 && W >=400){
                bar.style.background = 'orange';
            }else if(W >= 500){
                bar.style.background = '#58bc58';
                bar.style.width = '500px';
                span.innerHTML = '100.00';
                clearInterval(timer);
            }
        },10);
    </script>
</body>
</html>